<!-- @format -->

<template>
  <div id="app">
    <!-- 头部区域 -->
    <MyHeader
      title="购物车"
      bgColor="#1d7bff" />
    <!-- 商品列表区域 -->
    <div class="main">
      <!-- 商品项 -->
      <MyGoods
        v-for="item in cartList"
        :key="item.id"
        :goodsObj="item" />
    </div>
    <!-- 底部 -->
    <MyFooter :arr="cartList" />
  </div>
</template>

<script>
  import axios from 'axios'
  // 统计配置请求基地址
  axios.defaults.baseURL = 'https://www.escook.cn'
  import MyFooter from './components/MyFooter.vue'
  import MyGoods from './components/MyGoods.vue'
  import MyHeader from './components/MyHeader.vue'
  export default {
    components: { MyHeader, MyGoods, MyFooter },
    data() {
      return {
        // 购物车列表
        cartList: []
      }
    },
    created() {
      // 组件创建后、调用获取购物车列表方法
      this.getCartList()
    },
    methods: {
      // 获取购物车列表
      async getCartList() {
        // 发请求
        const resp = await axios.get('/api/cart')
        // 保存数据
        this.cartList = resp.data.list
      }
    }
  }
</script>

<style scoped lang="less">
  .main {
    padding: 45px 0 50px;
  }
</style>
